<template>
    <div id="devicelist">
        <Title>
            <template #title> 设备列表 </template>
        </Title>

        <div class="option">
            <Space size="large" wrap>
                创建时间
                <DatePicker type="date" placeholder="选择日期" style="width: 200px" placement="bottom" :transfer="true" />
            </Space>

            <Space>
                设备类型
                <Select v-model="model" style="width: 200px" :transfer="true">
                    <Option v-for="item in dedviceList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </Space>

            <Space size="large">
                设备ID
                <Input suffix="ios-search" placeholder="Enter text" style="width: auto" search v-model="deviceID" />
            </Space>

            <Space class="btn">
                <Button type="primary" @click="Getdevicelist">查询</Button>
                <Button type="primary" @click="add">新增</Button>
            </Space>
        </div>

        <div class="view">
            <!-- 问题代码---------------------------------------------------------------------------------------------- -->
            <Table border :columns="columns" :data="datas">
                <template #action="{ index }">
                    <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">修改</Button>
                    <Button type="error" size="small" @click="remove(index)">删除</Button>
                </template>
            </Table>

            <Page :total="total" page-size="8" show-total show-elevator @on-change="changePage" />
        </div>

        <!-- 修改 -->
        <div class="change">
            <Modal v-model="modal" :draggable="true" :reset-drag-position="true" :width="width" :title="title" @on-ok="ok"
                @on-cancel="cancel">
                <!-- 设备名称： -->
                <input type="text" placeholder="设备名称：" v-model="change.name" />
                <!-- 设备用户： -->
                <input type="text" placeholder="设备用户：" v-model="change.employeeId" />
                <!-- 设备添加时间： -->
                <!-- <input type="text" placeholder="设备添加时间："> -->
                <!-- 设备类型： -->
                <input type="text" placeholder="设备类型：" v-model="change.type" />
            </Modal>
        </div>
        <!-- 新增 -->
        <Modal v-model="modal1" :draggable="true" :reset-drag-position="true" title="新增设备" @on-ok="addok"
            @on-cancel="cancel">
            <div>
                设备ID：<input type="text" placeholder="" v-model="adddevice.id" />
            </div>
            <div>设备名称：<input type="text" v-model="adddevice.name" /></div>
            <div>设备用户：<input type="text" v-model="adddevice.employeeId" /></div>
            <div>设备类型：<input type="text" v-model="adddevice.type" /></div>
        </Modal>

        <!-- 删除 -->
        <Modal v-model="modal2" :draggable="true" :reset-drag-position="true" :title="title1" @on-ok="deleteok"
            @on-cancel="cancel">
            <p style="color: red">此操作不可逆</p>
        </Modal>
    </div>
</template>

<script >
import {
    getdevicelist,
    changedevice,
    adddevice,
    deletedevice,
} from "../api.js";
import Title from "@/components/device/Title.vue";
import {
    Space,
    DatePicker,
    Select,
    Option,
    Input,
    Button,
    Table,
    Page,
    Modal,
} from "view-ui-plus";
export default {
    name: "devicelist",
    components: {
        Title,
        Space,
        DatePicker,
        Select,
        Option,
        Input,
        Button,
        Table,
        Page,
        Modal,
    },
    data() {
        return {
            modal: false,
            modal1: false,
            modal2: false,
            title: "",
            title1: "新增设备",
            width: 100,
            deviceList: [
                {
                    value: "测报灯",
                    label: " 测报灯",
                },
                {
                    value: "杀虫灯",
                    label: "杀虫灯",
                },
                {
                    value: "监控",
                    label: "监控",
                },
            ],
            model: "",
            columns: [
                {
                    title: "设备ID",
                    key: "id",
                    width: "",

                    align: "center",
                    fixed: "left",
                },
                {
                    title: "设备名称",
                    key: "name",
                    width: "",

                    align: "center",
                },
                {
                    title: "设备用户",
                    key: "employeeId",
                    width: "",

                    align: "center",
                },
                {
                    title: "设备添加时间",
                    key: "createTime",
                    width: "",

                    align: "center",
                },
                {
                    title: "设备类型",
                    key: "type",
                    width: "",

                    align: "center",
                },
                {
                    title: "Action",
                    slot: "action",
                    align: "center",
                    width: "",
                    fixed: "right",
                },
            ],
            datas: [
                {
                    id: "1",
                    type: "1",
                    createTime: "1",
                    employeeId: "1",
                    name: "1",
                },
            ],
            deviceID: "",
            page: {
                pageNo: 1,
                pageSize: 8,
            },
            total: "",
            change: {
                id: "",
                name: "",
                employeeId: "",
                type: "",
            },
            adddevice: {
                employeeId: "",
                id: "",
                name: "",
                type: "",
                createTime: new Date(),
            },
            deletedevice: {
                ids: "",
            },

            bigwidth: "",
            width: 1200,
        };
    },
    // activated(){
    //     this.getwidth();
    //     this.Getdevicelist();
    // },
    created() {
        this.getwidth();
        this.Getdevicelist();
    },

    methods: {
        async Getdevicelist() {
            await getdevicelist("/device/page", {
                id: this.deviceID,
                pageNo: this.page.pageNo,
                pageSize: this.page.pageSize,
            }).then((Response) => {
                console.log(Response);
                this.total = Response.data.total;
                this.data = Response.data.records;

                this.deviceID = "";
            });
        },
        add() {
            this.modal1 = true;
        },
        show(index) {
            this.modal = true;
            console.log(this.data[index]);
            this.change.id = this.data[index].id;
            this.change.name = this.data[index].name;
            this.change.type = this.data[index].type;
            this.change.employeeId = this.data[index].employeeId;
            this.title = "修改设备" + this.data[index].id;
        },

        remove(index) {
            console.log("index", index);
            this.modal2 = true;
            this.deletedevice.ids = this.data[index].id;
            this.title1 = "删除设备" + this.data[index].id;
        },
        ok() {
            changedevice("/device", {
                id: this.change.id,
                employeeId: this.change.employeeId,
                name: this.change.name,
                type: this.change.type,
            }).then((res) => {
                console.log(res);
                let a = this.change.id;
                this.data[a - 1].name = this.change.name;
                this.data[a - 1].type = this.change.type;
                this.data[a - 1].employeeId = this.change.employeeId;
            });
        },
        addok() {
            adddevice("/device", {
                id: this.adddevice.id,
                employeeId: this.adddevice.employeeId,
                name: this.adddevice.name,
                type: this.adddevice.type,
            }).then((res) => {
                console.log(res);
                if (res.code == 1) {
                    this.Getdevicelist();

                    // this.total += 1;
                    // this.data.push(this.adddevice);
                }
            });
        },
        deleteok() {
            deletedevice("/device", {
                ids: this.deletedevice.ids,
            }).then((res) => {
                console.log(res);
                if (res.code == 1) {
                    this.Getdevicelist();
                }
            });
        },
        cancel() { },
        getwidth() {
            console.log("device", window.innerWidth);
            this.width = window.innerWidth;
            this.bigwidth = window.innerWidth > 720 ? true : false;
            if (window.innerWidth < 720) {
                this.changecellwidth();
            }
        },
        changecellwidth() {
            for (let i = 0; i < this.columns.length; i++) {
                this.columns[i].width = 100;
            }
            this.columns[0].width = 80;
            this.columns[5].width = 90;
            this.columns[3].width = 180;
        },
        changePage(pageid) {
            this.deviceID = null;
            console.log(pageid);
            this.page.pageNo = pageid;
            this.Getdevicelist();
        },
    },
};
</script>

<style lang="less" scoped>
#devicelist {
    font-size: calc(100vw * 30 / 1920);

    .view {
        width: 100%;
    }
}

.change {
    div {
        margin: 1rem 0 !important;
    }
}

@media screen and (max-width: 821px) {
    #devicelist {
        .change {
            width: 100%;
        }
    }
}
</style>

<style lang="less">
.option {
    font-size: calc(100vw * 20 / 1920);

    .ivu-space {
        gap: 0 !important;
        margin-top: 1rem;
        padding-right: 3rem;
    }

    .ivu-space-item {
        margin-left: 1rem;
    }
}

.view {
    .ivu-table-wrapper {
        z-index: 1 !important;
        margin-top: 2rem;
    }

    .ivu-page {
        width: 100%;
        text-align: center;
        margin: 10px 0;
    }
}

@media screen and (max-width: 720px) {
    .option {
        font-size: calc(100vw * 70 / 1920);
    }

    .view {
        .ivu-table-wrapper {
            margin-top: 2rem;
        }
    }

    .btn {
        margin-left: 25%;
    }
}
</style>